<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>tab栏切换</title>
    <style>
        .Box {
            width: 240px;
            border: 1px solid #000;
            margin: 100px auto;
            padding: 20px;
        }

        .con {
            width: 100%;
            height: 200px;
            background-color: #cccccc;
            border: 1px solid #000;
            margin-top: 10px;
            display: none;
        }

        .current {
            background-color: pink;
        }
    </style>
</head>
<body>
<div class="Box" id="box">
    <button class="current">按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <div class="con" style="display:block">内容1</div>
    <div class="con">内容2</div>
    <div class="con">内容3</div>
    <div class="con">内容4</div>
</div>

</body>
</html>
<script>
    // 思路：
    //1. 点哪个按钮，哪个按钮的背景颜色变成粉色
    //2. 与当前按钮索引一致的那个盒子要显示出来，其它盒子隐藏
    var box = document.getElementById('box');
    var buts = box.getElementsByTagName('button');
    var divs = box.getElementsByTagName('div');
    for (var i =0; i < buts.length; i++) {
        buts[i].setAttribute('index',i);
        buts[i].onclick = function () {
            for (var j = 0; j < buts.length; j++) {
                buts[j].removeAttribute('class');
            }
            this.setAttribute('class','current');
            for (var k = 0; k < divs.length; k++) {
                divs[k].style.display = 'none';
            }
            var inx = this.getAttribute('index');
            divs[inx].style.display = 'block';
        }
    }
</script>
